
<template>
  <div>
    <!-- <div class="toptitle">组织编码</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- <el-form-item label="组织名称">
        <el-input v-model="formInline.user" placeholder></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="creatoneOrg()" size="mini" icon="el-icon-delete">新增一级组织</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增</el-button>
      </el-form-item>-->
    </el-form>

    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="orgSeq" border v-loading="loading"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{ background: '#ebecf0', color: '#606266' }">
      <el-table-column prop="orgName" label="店铺名称"></el-table-column>
      <el-table-column prop="city" label="城市" align="center"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column>
      <!-- <el-table-column prop="updateUser" sortable label="更新人"></el-table-column> -->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="creatoneOrgone(scope.row)"
            v-if="scope.row.level == 1 || scope.row.level == 2">创建下级组织</el-button>
          <el-button type="text" size="mini" @click="changeorg(scope.row)" v-if="scope.row.level == 1 ||
      scope.row.level == 2 ||
      scope.row.level == 3
      ">修改</el-button>
          <el-button type="text" size="mini" @click="handledelete(scope.row)" v-if="scope.row.level == 1 ||
      scope.row.level == 2 ||
      scope.row.level == 3
      ">删除</el-button>
          <el-button type="text" size="mini" @click="handleMove(scope.row)" v-if="scope.row.level > 2">
            移动
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-form :inline="true" :model="formInline">
      <el-form-item style="margin-top: 6px;">
        <!-- <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增组织编码</el-button> -->
      </el-form-item>
    </el-form>
    <!-- <div class="block" style="margin-top:-49px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>-->
    <el-dialog title="信息" :visible.sync="dialogVisible" width="30%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="本级组织名称" prop="orgName">
          <el-input v-model="ruleForm.orgName"></el-input>
        </el-form-item>
        <el-form-item label="本级组织编码" prop="orgSeq">
          <el-input v-model="ruleForm.orgSeq"></el-input>
        </el-form-item>
        <el-form-item label="上级组织名称" prop="upOrgSeq">
          <el-select v-model="ruleForm.upOrgSeq" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="更新人" prop="updateUser">
          <el-input v-model="ruleForm.updateUser"></el-input>
        </el-form-item>-->
        <el-form-item label="组织类型" prop="orgType">
          <!-- <el-input v-model="ruleForm.orgType"></el-input> -->
          <!-- <el-select v-model="ruleForm.orgType" placeholder="请选择">
            <el-option
              v-for="item in optionsone"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>-->

          <el-select v-model="ruleForm.orgType">
            <el-option label="总部" value="1"></el-option>
            <el-option label="大区" value="2"></el-option>
            <el-option label="营销区域" value="3"></el-option>
            <el-option label="门店" value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()" size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="信息" :visible.sync="dialogVisibleorg" width="30%">
      <el-form :model="ruleFormorg" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="组织名称" prop="orgName">
          <el-input v-model="ruleFormorg.orgName"></el-input>
        </el-form-item>

        <!-- <el-form-item label="更新人" prop="updateUser">
          <el-input v-model="ruleForm.updateUser"></el-input>
        </el-form-item>-->
        <el-form-item label="组织类型" prop="orgType">
          <!-- <el-input v-model="ruleForm.orgType"></el-input> -->
          <el-select v-model="ruleFormorg.orgType">
            <el-option label="总部" value="1" v-if="levelone"></el-option>
            <el-option label="大区" value="2" v-if="leveltwo"></el-option>
            <el-option label="营销区域" value="3" v-if="levelthree"></el-option>
            <!-- <el-option label="门店" value="4"></el-option> -->
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleorg = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEditone()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="信息" :visible.sync="dialogVisibleorgone" width="30%">
      <el-form :model="ruleFormorg" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="组织名称" prop="orgName">
          <el-input v-model="ruleFormorg.orgName"></el-input>
        </el-form-item>

        <!-- <el-form-item label="更新人" prop="updateUser">
          <el-input v-model="ruleForm.updateUser"></el-input>
        </el-form-item>-->
        <el-form-item label="组织类型" prop="orgType">
          <!-- <el-input v-model="ruleForm.orgType"></el-input> -->
          <el-select v-model="ruleFormorg.orgType">
            <el-option label="总部" value="1" v-if="levelone"></el-option>
            <el-option label="大区" value="2" v-if="leveltwo"></el-option>
            <el-option label="营销区域" value="3" v-if="levelthree"></el-option>
            <!-- <el-option label="门店" value="4"></el-option> -->
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleorgone = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEdittwo()" size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="门店移动" :visible.sync="dialogVisibleMove" width="30%" @close="$refs.ruleFormMoveRef.resetFields()">
      <el-form :model="ruleFormMove" :rules="rulesMove" ref="ruleFormMoveRef" label-width="120px">
        <el-form-item prop="regionOrgSeq" label="营销大区">
          <el-select v-model="ruleFormMove.regionOrgSeq" @change="changeArea">
            <el-option v-for="(item, index) in regionOrgSeqList" :key="item.orgSeq || index" :label="item.orgName"
              :value="item.orgSeq" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="curMoveLevel == 4" prop="areaOrgSeq" label="营销区域">
          <el-select v-model="ruleFormMove.areaOrgSeq">
            <el-option v-for="(item, index) in areaOrgSeqList" :key="item.orgSeq || index" :label="item.orgName"
              :value="item.orgSeq" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleMove = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmMove()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getmemberorg,
  addmemberorg,
  deleteorg,
  updaterole,
  areaMove,
  //   getUserOrgType
} from '@/api/organaz';
import qs from 'qs';
export default {
  data() {
    return {
      tableData: [],

      loading: true,
      dialogVisibleorg: false,
      dialogVisibleorgone: false,
      ruleForm: {
        orgName: '',
        orgSeq: '',
        upOrgSeq: '',
        upOrgSeqName: '',
        updateUser: '',
        orgType: '',
      },
      levelone: false,
      leveltwo: false,
      levelthree: false,
      creatorg: true,
      orgSeqxia: '',
      ruleFormorg: {
        orgName: '',
        orgSeq: '',
        upOrgSeq: '',
        upOrgSeqName: '',
        updateUser: '',
        orgType: '',
      },
      rules: {
        orgName: [
          { required: true, message: '请输入组织名称', trigger: 'blur' },
        ],
        orgType: [
          { required: true, message: '请输入组织类型', trigger: 'change' },
        ],
      },

      level: '',
      total: 0,
      options: [],
      optionsone: [],
      listQuery: {
        current: 1,
        size: 10,
      },
      flagorg: false,
      dialogVisible: false,
      formInline: {
        user: '',
        region: '',
      },
      rules: {},

      // 门店移动的数据
      curMoveLevel: 4, // 当前移动的层级
      dialogVisibleMove: false,
      ruleFormMove: {
        orgSeq: '',
        areaOrgSeq: '',
        areaName: '',
        regionOrgSeq: '',
        regionName: '',
      },
      rulesMove: {
        areaOrgSeq: [
          { required: true, message: '请选择营销大区', trigger: 'change' },
        ],
        regionOrgSeq: [
          { required: true, message: '请选择区域', trigger: 'change' },
        ],
      },
      // 营销大区列表
      regionOrgSeqList: [],
      // 营销区域列表
      areaOrgSeqList: [],
    };
  },
  mounted() {
    this.rolemanageone();
    console.log(this.tableData, 'opop');
  },
  methods: {
    creatoneOrg() {
      this.dialogVisibleorg = !this.dialogVisibleorg;
      this.ruleFormorg.orgName = '';
      this.ruleFormorg.orgType = '';
      this.level = 1;
      console.log(this.level, 'ppp');
      if (this.level == 1) {
        this.levelone = true;
        this.leveltwo = false;
        this.levelthree = false;
      }
    },
    creatoneOrgone(v) {
      console.log(v, 'll');

      this.flagorg = true;
      this.orgSeqxia = v.orgSeq;
      this.ruleFormorg.orgName = '';
      this.ruleFormorg.orgType = '';
      this.dialogVisibleorgone = !this.dialogVisibleorgone;
      this.level = v.level + 1;
      console.log(this.level, 'll55');
      if (this.level == 1) {
        this.levelone = true;
        this.leveltwo = false;
        this.levelthree = false;
      }
      if (this.level == 2) {
        this.levelone = false;
        this.leveltwo = true;
        this.levelthree = false;
      }
      if (this.level == 3) {
        this.levelone = false;
        this.leveltwo = false;
        this.levelthree = true;
      }
    },
    confirmEditone() {
      if (this.ruleFormorg.orgName == '' || this.ruleFormorg.orgName == null) {
        this.$message.error('请输入本级组织名称');
        return;
      }
      if (this.ruleFormorg.orgType == '' || this.ruleFormorg.orgType == null) {
        this.$message.error('请选择组织类型');
        return;
      }
      let data = {
        orgName: this.ruleFormorg.orgName,
        level: 1,
        status: '1',
        orgType: this.ruleFormorg.orgType,
      };
      addmemberorg(data).then((res) => {
        this.$message({
          showClose: true,
          message: '添加成功',
          type: 'success',
        });
        this.dialogVisibleorg = !this.dialogVisibleorg;
        this.rolemanageone();
      });
    },
    confirmEdittwo() {
      if (this.flagorg == false) {
        let dataone = {
          orgName: this.ruleFormorg.orgName,
          orgSeq: this.ruleFormorg.orgSeq,
          orgType: this.ruleFormorg.orgType,
        };
        updaterole(dataone).then((res) => {
          this.dialogVisibleorgone = !this.dialogVisibleorgone;
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success',
          });
          this.rolemanageone();
        });
      } else if (this.flagorg == true) {
        if (
          this.ruleFormorg.orgName == '' ||
          this.ruleFormorg.orgName == null
        ) {
          this.$message.error('请输入本级组织名称');
          return;
        }
        if (
          this.ruleFormorg.orgType == '' ||
          this.ruleFormorg.orgType == null
        ) {
          this.$message.error('请选择组织类型');
          return;
        }
        let data = {
          orgName: this.ruleFormorg.orgName,
          level: this.level,
          status: '1',
          orgType: this.ruleFormorg.orgType,
          upOrgSeq: this.orgSeqxia,
        };
        addmemberorg(data).then((res) => {
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success',
          });
          this.dialogVisibleorgone = !this.dialogVisibleorgone;
          this.rolemanageone();
        });
      }
    },
    changeorg(v) {
      console.log(v, 'lll');
      console.log(this.level, 'll66');
      this.level = v.level;
      if (this.level == 1) {
        this.levelone = true;
        this.leveltwo = false;
        this.levelthree = false;
      }

      if (this.level == 2) {
        this.levelone = false;
        this.leveltwo = true;
        this.levelthree = false;
      }
      if (this.level == 3) {
        this.levelone = false;
        this.leveltwo = false;
        this.levelthree = true;
      }
      this.dialogVisibleorgone = !this.dialogVisibleorgone;
      var userId = localStorage.getItem('userId');
      this.ruleFormorg.orgName = v.orgName;
      this.ruleFormorg.orgSeq = v.orgSeq;
      this.ruleFormorg.orgType = String(v.orgType);
      this.flagorg = false;
    },
    kong() {
      this.formInline.user = '';
      this.formInline.region = '';
    },
    search() {
      //   let data = {
      //     roleName: this.formInline.user,
      //     roleType: this.formInline.region
      //   };
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          orgName: this.formInline.user,
          orgType: this.formInline.region,
        },
      };
      //  };
      getmemberorg(data).then((res) => {
        this.tableData = res.records;
      });
    },
    onSubmit() {
      console.log('submit!');
    },
    indexMethod(index) {
      let curpage = this.listQuery.current; //单前页码，具体看组件取值
      let limitpage = this.listQuery.size; //每页条数，具体是组件取值
      return index + 1 + (curpage - 1) * limitpage;
    },
    handledelete(v) {
      console.log(v, 'pp');
      if (v.children.length == 0) {
        let data = {
          orgId: v.orgSeq,
        };
        this.$confirm('确认删除吗？').then((_) => {
          deleteorg(qs.stringify(data)).then((res) => {
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success',
            });
            this.rolemanageone();
          });
        });
      } else {
        this.$message({
          showClose: true,
          message: '请先删除子组织！',
          type: 'error',
        });
      }
    },
    add() {
      this.dialogVisible = !this.dialogVisible;
      this.editflag = true;
    },
    edit(v) {
      console.log(v, 'kkdd');
      this.ruleForm.orgName = v.orgName;
      this.ruleForm.orgSeq = v.orgSeq;
      this.ruleForm.upOrgSeq = v.upOrgSeq;
      this.ruleForm.upOrgSeqName = v.upOrgSeqName;
      this.ruleForm.orgType = String(v.orgType);
      this.ruleForm.updateUser = v.updateUser;
      //this.form.state = v.status;
      console.log(v, 'pp');
      this.dialogVisible = !this.dialogVisible;
      this.editflag = false;
    },
    confirmEdit(v) {
      console.log(v, 'ff');
      if (this.ruleForm.orgName == '' || this.ruleForm.orgName == null) {
        this.$message.error('请输入本级组织名称');
        return;
      }
      if (this.ruleForm.orgSeq == '' || this.ruleForm.orgSeq == null) {
        this.$message.error('请输入本级组织编码');
        return;
      }
      if (this.ruleForm.upOrgSeq == '' || this.ruleForm.upOrgSeq == null) {
        this.$message.error('请选择上级组织名称');
        return;
      }
      if (this.ruleForm.orgType == '' || this.ruleForm.orgType == null) {
        this.$message.error('请选择组织类型');
        return;
      }
      if (this.editflag) {
        //   var u1 = "u1";
        var userId = localStorage.getItem('userId');
        let data = {
          orgName: this.ruleForm.orgName,
          orgSeq: this.ruleForm.orgSeq,
          upOrgSeq: this.ruleForm.upOrgSeq,
          upOrgSeqName: this.ruleForm.upOrgSeqName,
          orgType: this.ruleForm.orgType,
          updateUser: this.ruleForm.updateUser,
          status: '1',
        };
        addmemberorg(data).then((res) => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success',
          });
          this.rolemanageone();
        });
      } else {
        //var u1 = "u1";
        var userId = localStorage.getItem('userId');
        let data = {
          orgName: this.ruleForm.orgName,
          orgSeq: this.ruleForm.orgSeq,
          upOrgSeq: this.ruleForm.upOrgSeq,
          upOrgSeqName: this.ruleForm.upOrgSeqName,
          orgType: this.ruleForm.orgType,
          updateUser: this.ruleForm.updateUser,
        };
        updaterole(data).then((res) => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success',
          });
          this.rolemanageone();
        });
      }
    },
    onSubmit() {
      console.log('submit!');
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.rolemanageone();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.rolemanageone();
    },
    handleClick(v) {
      if (v.status === 0) {
        var uuid = 1;
      } else if (v.status === 1) {
        var uuid = 0;
      }
      let data = { roleId: v.roleId, status: uuid };
      usebutton(data).then((res) => {
        this.$message({
          showClose: true,
          message: res.message,
          type: 'success',
        });
        this.rolemanageone();
      });
    },
    rolemanageone() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {},
      };
      getmemberorg(data).then((res) => {
        res.records.forEach((item, i) => {
          this.options.push({ value: item.orgSeq, label: item.orgName });
        });

        this.regionOrgSeqList = res.records[0].children || [];

        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
        console.log(this.tableData, 'ppe');
      });

      //   let dataone = {
      //     orgType: "",
      //     orgTypeName: ""
      //   };

      //   getUserOrgType(dataone).then(res => {
      //     res.records.forEach((item, i) => {
      //       this.optionsone.push({
      //         value: item.orgType,
      //         label: item.orgTypeName
      //       });
      //     });
      //   });
    },

    handleMove(row) {
      this.curMoveLevel = row.level;
      this.ruleFormMove = { ...this.$options.data().ruleFormMove };
      this.dialogVisibleMove = true;
      if (row.level == 3) {
        this.ruleFormMove.areaOrgSeq = row.orgSeq;
        this.ruleFormMove.areaName = row.orgName;
      } else {
        this.ruleFormMove.orgSeq = row.orgSeq;
      }
    },
    changeArea(value) {
      const curRegion = this.regionOrgSeqList.find(
        (item) => item.orgSeq === value
      );
      if (this.curMoveLevel == 4) {
        this.ruleFormMove.areaOrgSeq = '';
        this.areaOrgSeqList = curRegion.children || [];
      } else {
        this.areaOrgSeqList = [];
      }
      this.ruleFormMove.regionName = curRegion.orgName;
    },
    confirmMove() {
      this.$refs.ruleFormMoveRef.validate((valid) => {
        if (valid) {
          if (this.curMoveLevel == 4) {
            const curArea = this.areaOrgSeqList.find(
              (item) => item.orgSeq === this.ruleFormMove.areaOrgSeq
            );
            this.ruleFormMove.areaName = curArea.orgName;
          }
          areaMove(this.curMoveLevel, this.ruleFormMove).then(() => {
            this.dialogVisibleMove = false;
            this.$message({
              type: 'success',
              message: '操作成功!',
            });
            this.rolemanageone();
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
</style>
